
$(function () {
    //1-页面加载后，在页面渲染第一屏用户数据
    var curretnPage = 1;
    var pageSize = 5;
    var isDelete;
    var id;

    render();
    function render() {
        $.ajax({
            url: '/user/queryUser',
            type: 'get',
            data: {
                page: curretnPage,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function (info) {
                console.log(info);   
                //template 接受是数据必须是对象， 在模版中使用时对象的属性名
                $('tbody').html(template('tmp', info));
                // 分页 ： 根据后台数据总数，每页数据条数 ，推算出页码的个数
                $('#paginator').bootstrapPaginator({
                    bootstrapMajorVersion: 3, //bootstrap版本号 3 父容器是ul 
                    currentPage: curretnPage, //当前页面
                    totalPages: Math.ceil(info.total / info.size),               
                    //当分页标签被点击 事件
                    onPageClicked: function (_, _, _, page) {
                        //page 当前的页面
                        curretnPage = page; //记录当前页页码
                        render();
                    }
                });
            }
        })
    }


    //2-点击按钮，显示模态框,记录当前用户id
    // 动态生成的元素，使用事件委托
    $('tbody').on('click', '.btn-user', function () {
        //显示模态框
        $('#userModal').modal('show');
        //记录当前数据id  .data 用于获取 data-id 自定义数中数据
        id = $(this).parent().data('id');  //  $(this).parent().attr('data-id');
        console.log(id);
        //记录用户是要禁用还是启用  ，通过按钮的颜色判断   1 启用  0 禁用
        isDelete = $(this).hasClass('btn-success') ? 1 : 0;
        
    });


    //3-点击模态框的确定按钮，去操作对应id的数据
    $('.btn-ok').click(function () {
        //操作对应的id的数据，进行禁用获取启用 
        $.ajax({
            url: '/user/updateUser',
            type: 'post',
            data: {
                id: id,
                isDelete: isDelete
            },
            dataType: 'json',
            success: function (info) {
                console.log(info);    
                if (info.success) {
                    // 隐藏模态框
                    $('#userModal').modal('hide');
                    // 重新渲染页面
                    render();
                }
            }
        })
    });



    
})